<template>
  <div class="block">
    <el-button type="primary" @click="updateeCharts()">点击生成</el-button>
    <div class="block">
      <span class="demonstration">选择月份</span>
      <el-date-picker v-model="value" type="month" placeholder="选择月">
      </el-date-picker>
    </div>
    <br />
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <div id="myChart" style="width: 600px; height: 400px"></div>
      </div>
    </el-col>
  </div>
</template>

<script>
var rateChart; //全局变量
export default {
  data() {
    return {
      dataChart: {
        date: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        addTotal: [820, 932, 901, 934, 1290, 1330, 1320],
        updateTotal: [820, 32, 9, 94, 120, 130, 1320],
        deleteTotal: [820, 332, 1, 934, 290, 133, 120],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value: "2021-3",
    };
  },
  created() {
    var _this = this;
    //初始化数据
    this.$http
      .get("/operlog/queryOperLog?dateTime=" + this.value)
      .then(function (response) {
        _this.dataChart.date = response.data.data.date;
        _this.select();
      });
  },
  methods: {
    updateeCharts() {
      var _this = this;
      //初始化数据
      let data = new Date(_this.value);
      let newdata = data.getFullYear() + "-" + (Number(data.getMonth())+1);
      this.$http
        .get("/operlog/queryOperLog?dateTime=" + newdata)
        .then(function (response) {
          _this.dataChart = response.data.data;
          _this.select();
        });
    },
    select() {
      var _this = this;
      if (rateChart != null && rateChart != "" && rateChart != undefined) {
        rateChart.dispose(); //销毁
      }
      rateChart = this.$echarts.init(document.getElementById("myChart"));

      var option;

      option = {
        title: {
          text: "操作统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["添加", "修改", "删除"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: _this.dataChart.date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: _this.dataChart.addTotal,
            name: "添加",
            type: "line",
            smooth: true,
          },
          {
            data: _this.dataChart.updateTotal,
            name: "修改",
            type: "line",
            smooth: true,
          },
          {
            data: _this.dataChart.deleteTotal,
            name: "删除",
            type: "line",
            smooth: true,
          },
        ],
      };

      option && rateChart.setOption(option);
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 10px;
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  min-height: 500px;
}
.block {
  float: left;
}
</style>